<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2230188_qt3cr6efsmi.css">
<style>
  * {
    padding: 0;
    margin: 0;
  }

  p {
    margin: 10px;
  }

  i {
    cursor: pointer;
  }

  .side {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99;
    top: 0;
    left: 0;
    opacity: .3;
    display: none;
  }

  .dialog {
    position: fixed;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: #fff;
    border-radius: 5px;
    display: none;
  }

  header {
    text-align: center;
    padding: 10px;
    font-size: 18px;
  }

  label {
    display: inline-block;
    width: 85px;
    text-align: right;
  }

  input {
    width: 160px;
  }

  textarea {
    display: inline-block;
    width: 160px;
  }

  .content-lab {
    vertical-align: top;
  }

  footer {
    height: 45px;
    display: flex;
    border-top: 1px solid #ccc;
  }

  .foot div {
    width: 50%;
    text-align: center;
    line-height: 45px;

  }

  section {
    padding: 10px;
    text-align: right;
  }

  .icon>i {
    font-size: 22px;
    color: #378bf5;
  }

  .lastname {
    color: #378bf5;
  }

  ul {
    list-style: none;
    padding: 0 10px;
  }

  li {
    margin-bottom: 10px;
    display: flex;
  }

  .comment {
    flex: 1;
  }

  .comment-right {
    margin-left: auto;
  }

  .comment-right i {
    margin-left: 10px;
  }

  .foot div {
    cursor: pointer;
  }
</style>
<script src="../js/jquery.js"></script>

<body>
  <p>
    这辈子，你有没有为一件事拼尽过全力？不是全力以赴，是拼尽全部力气。
  </p>
  <section class="icon">
    <i class="iconfont icon-xin1"></i>
    <!-- <i class="iconfont icon-xin" style="display: none;"></i> -->
    <i class="iconfont icon-pinglun" onclick="show(true)"></i>
  </section>
  <ul>
    
  </ul>
  <div class="side"></div>
  <div class="dialog">
    <header>发表评论</header>
    <p>
      <label>评论人：</label><input id="name" type="text">
    </p>
    <p>
      <label class="content-lab">评论内容：</label><textarea id="content" cols="30" rows="10" maxlength="140"></textarea>
    </p>
    <footer class="foot">
      <div class="cancel" onclick="show(false)">取消</div>
      <div class="determine" style="color:blue;border-left:1px solid #ccc" onclick="add()">确定</div>
    </footer>
  </div>
</body>

</html>
<script>
  let list = []; // 存放评论的数组
  let index = null; // 存放回复的是谁

  function show (val) { // 点击评论显示弹窗
    select('.dialog').style.display = val?'block':'none';
    select('.side').style.display = val?'block':'none';
  }

  function add(){ // 添加的函数
    let obj = {};
    if (index == null) { // 评论的逻辑
        obj = {
        name: select('#name').value,
        msg: select('#content').value,
        flag: true, // 为true就代表是评理，为false 就代表是回复
      }
      list.push(obj);
    } else {
        obj = {
        name: select('#name').value + "回复" + list[index].name,
        msg: select('#content').value,
        flag: false, // 为true就代表是评理，为false 就代表是回复
      }
      list.splice(index+1,0,obj); //splice 有三个参数
    }
     index = null; // 清空选中索引
     
     render(list); // 调用渲染函数
     show(false); // 隐藏弹窗
  }


  function render (arr){ // 渲染函数
     let str = '';
     console.log(arr);
     arr.forEach((item,index) => {
      str+=`<li>
      <i class="lastname">${item.name}:</i>
      <span>：${item.msg}</span>
      <div class="comment-right">
        ${item.flag?`<i class="iconfont icon-bianji" onclick="say(${index})"></i>`:''}
        <i class="iconfont icon-shanchu" onclick="del(${index})"></i>
      </div>
    </li>`
     });
    //  console.log(str);
     select('ul').innerHTML = str;
  }


  function say (i) { // 评论的方法
    show(true);
    index = i;
  }

  function del (i){ // 删除的事件
    list.splice(i,1);
    render(list);
  }

  function select(val){ // 选取节点函数的封装
    return document.querySelector(val)
  }



  // let arr = [1,2,3,4,5];
  // arr.splice(1,0,6)
  // console.log(arr);
</script>